<template>
  <view class="intention-add">

      <!-- 客户信息 -->
      <view class="customer-info-card">
        <view class="customer-avatar">
          <text class="avatar-text">{{ customerInfo.name.charAt(0) }}</text>
        </view>
        <view class="customer-details">
          <text class="customer-name">{{ customerInfo.name }}</text>
          <text class="customer-phone">{{ customerInfo.phone }}</text>
        </view>
      </view>

      <!-- 意向等级 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">意向等级</text>
          <text class="title-required">*</text>
        </view>
        <view class="level-grid">
          <view 
            class="level-item" 
            v-for="level in intentionLevels" 
            :key="level.value"
            :class="{ active: formData.level === level.value }"
            @click="formData.level = level.value"
          >
            <view class="level-dot" :style="{ backgroundColor: level.color }"></view>
            <text class="level-text">{{ level.label }}</text>
          </view>
        </view>
      </view>

      <!-- 意向房源 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">意向房源</text>
        </view>
        
        <!-- 楼栋选择 -->
        <view class="form-item">
          <text class="item-label">意向楼栋</text>
          <picker 
            class="item-picker" 
            mode="selector" 
            :range="buildings"
            @change="onBuildingChange"
          >
            <view class="picker-content">
              <text class="picker-text">{{ formData.building || '请选择楼栋' }}</text>
              <text class="picker-arrow">▼</text>
            </view>
          </picker>
        </view>

        <!-- 户型选择 -->
        <view class="form-item">
          <text class="item-label">意向户型</text>
          <picker 
            class="item-picker" 
            mode="selector" 
            :range="houseTypes"
            @change="onHouseTypeChange"
          >
            <view class="picker-content">
              <text class="picker-text">{{ formData.houseType || '请选择户型' }}</text>
              <text class="picker-arrow">▼</text>
            </view>
          </picker>
        </view>

        <!-- 楼层选择 -->
        <view class="form-item">
          <text class="item-label">意向楼层</text>
          <view class="floor-inputs">
            <input 
              class="floor-input" 
              type="number" 
              placeholder="起始" 
              v-model="formData.floorStart"
            />
            <text class="floor-separator">-</text>
            <input 
              class="floor-input" 
              type="number" 
              placeholder="结束" 
              v-model="formData.floorEnd"
            />
            <text class="floor-unit">层</text>
          </view>
        </view>
      </view>

      <!-- 预算信息 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">预算信息</text>
        </view>
        
        <!-- 总价预算 -->
        <view class="form-item">
          <text class="item-label">总价预算</text>
          <view class="budget-inputs">
            <input 
              class="budget-input" 
              type="digit" 
              placeholder="最低" 
              v-model="formData.budgetMin"
            />
            <text class="budget-separator">-</text>
            <input 
              class="budget-input" 
              type="digit" 
              placeholder="最高" 
              v-model="formData.budgetMax"
            />
            <text class="budget-unit">万元</text>
          </view>
        </view>

        <!-- 首付预算 -->
        <view class="form-item">
          <text class="item-label">首付预算</text>
          <view class="budget-inputs">
            <input 
              class="budget-input" 
              type="digit" 
              placeholder="最低" 
              v-model="formData.downPaymentMin"
            />
            <text class="budget-separator">-</text>
            <input 
              class="budget-input" 
              type="digit" 
              placeholder="最高" 
              v-model="formData.downPaymentMax"
            />
            <text class="budget-unit">万元</text>
          </view>
        </view>

        <!-- 付款方式 -->
        <view class="form-item">
          <text class="item-label">付款方式</text>
          <view class="payment-options">
            <view 
              class="payment-option" 
              v-for="option in paymentOptions" 
              :key="option.value"
              :class="{ active: formData.payment === option.value }"
              @click="formData.payment = option.value"
            >
              <text class="payment-text">{{ option.label }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 购房目的 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">购房目的</text>
        </view>
        <view class="purpose-grid">
          <view 
            class="purpose-item" 
            v-for="purpose in purchasePurposes" 
            :key="purpose.value"
            :class="{ active: formData.purpose === purpose.value }"
            @click="formData.purpose = purpose.value"
          >
            <text class="purpose-icon">{{ purpose.icon }}</text>
            <text class="purpose-text">{{ purpose.label }}</text>
          </view>
        </view>
        
        <!-- 其他目的输入 -->
        <view class="form-item" v-if="formData.purpose === 'other'">
          <input 
            class="other-input" 
            type="text" 
            placeholder="请输入其他购房目的" 
            v-model="formData.otherPurpose"
          />
        </view>
      </view>

      <!-- 特殊需求 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">特殊需求</text>
        </view>
        <textarea 
          class="demand-textarea" 
          placeholder="请输入客户的特殊需求（如楼层偏好、朝向要求、学区需求等）" 
          v-model="formData.specialDemands"
          maxlength="200"
          :show-confirm-bar="false"
        ></textarea>
        <text class="textarea-count">{{ formData.specialDemands.length }}/200</text>
      </view>

      <!-- 预计购买时间 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">预计购买时间</text>
        </view>
        <picker 
          class="time-picker" 
          mode="date" 
          :value="formData.expectedTime"
          @change="onExpectedTimeChange"
        >
          <view class="picker-content">
            <text class="picker-text">{{ formData.expectedTime || '选择预计购买时间' }}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </picker>
      </view>

      <!-- 提交按钮 -->
      <view class="action-buttons">
        <button class="submit-btn" @click="submitForm" :disabled="isSubmitting">
          {{ isSubmitting ? '提交中...' : '确认提交' }}
        </button>
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        level: 'A',
        building: '',
        houseType: '',
        floorStart: '',
        floorEnd: '',
        budgetMin: '',
        budgetMax: '',
        downPaymentMin: '',
        downPaymentMax: '',
        payment: '',
        purpose: '',
        otherPurpose: '',
        specialDemands: '',
        expectedTime: ''
      },
      customerInfo: {
        name: '吴老师',
        phone: '18223444319'
      },
      intentionLevels: [
        { label: 'A类（高意向）', value: 'A', color: '#ff4d4f' },
        { label: 'B类（中意向）', value: 'B', color: '#fa8c16' },
        { label: 'C类（低意向）', value: 'C', color: '#52c41a' },
        { label: 'D类（待跟进）', value: 'D', color: '#1890ff' }
      ],
      buildings: ['1号楼', '2号楼', '3号楼', '5号楼', '8号楼', '12号楼'],
      houseTypes: [
        '一室一厅',
        '两室一厅', 
        '两室两厅',
        '三室一厅',
        '三室两厅',
        '四室两厅',
        '复式',
        '别墅'
      ],
      paymentOptions: [
        { label: '全款', value: 'full' },
        { label: '商业贷款', value: 'commercial' },
        { label: '公积金贷款', value: 'fund' },
        { label: '组合贷款', value: 'combined' }
      ],
      purchasePurposes: [
        { label: '自住', value: 'self', icon: '🏠' },
        { label: '投资', value: 'investment', icon: '📈' },
        { label: '学区', value: 'school', icon: '🎓' },
        { label: '婚房', value: 'marriage', icon: '💍' },
        { label: '改善', value: 'upgrade', icon: '✨' },
        { label: '其他', value: 'other', icon: '📝' }
      ],
      isSubmitting: false
    }
  },

  onLoad(options) {
    if (options.customerId) {
      this.loadCustomerInfo(options.customerId)
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 保存草稿
    saveDraft() {
      try {
        uni.setStorageSync('intentionDraft', this.formData)
        uni.showToast({
          title: '已保存到草稿',
          icon: 'success'
        })
      } catch (e) {
        uni.showToast({
          title: '保存草稿失败',
          icon: 'none'
        })
      }
    },

    // 楼栋选择
    onBuildingChange(e) {
      const index = e.detail.value
      this.formData.building = this.buildings[index]
    },

    // 户型选择
    onHouseTypeChange(e) {
      const index = e.detail.value
      this.formData.houseType = this.houseTypes[index]
    },

    // 预计购买时间选择
    onExpectedTimeChange(e) {
      this.formData.expectedTime = e.detail.value
    },

    // 加载客户信息
    loadCustomerInfo(customerId) {
      // 这里应该是实际的API调用
      console.log('加载客户信息:', customerId)
    },

    // 提交表单
    async submitForm() {
      // 验证必填字段
      if (!this.formData.level) {
        uni.showToast({
          title: '请选择意向等级',
          icon: 'none'
        })
        return
      }

      this.isSubmitting = true

      try {
        // 调用云函数创建意向记录
        const result = await uniCloud.callFunction({
          name: 'sunny-intention',
          data: {
            method: 'create',
            data: {
              ...this.formData,
              customerId: this.customerInfo.id,
              customerName: this.customerInfo.name
            }
          }
        })

        if (result.result.code === 200) {
          uni.showToast({
            title: '意向信息保存成功',
            icon: 'success'
          })

          // 清除草稿
          uni.removeStorageSync('intentionDraft')

          // 返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(result.result.message)
        }
      } catch (error) {
        console.error('保存意向信息失败:', error)
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.intention-add {
	padding: 30rpx;
  background: #f5f6fa;
}

/* 导航头部 */
.nav-header {
  background: white;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
}

.nav-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.nav-text {
  font-size: 28rpx;
  color: #1890ff;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 内容区域 */
.content {
  height: calc(100vh - 120rpx);
  padding: 30rpx;
}

/* 客户信息卡片 */
.customer-info-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.customer-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.avatar-text {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
}

.customer-details {
  display: flex;
  flex-direction: column;
}

.customer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.customer-phone {
  font-size: 26rpx;
  color: #666;
}

/* 表单区域 */
.form-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 8rpx;
}

.title-required {
  color: #ff4757;
  font-size: 24rpx;
}

/* 意向等级网格 */
.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.level-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
  transition: all 0.3s ease;
}

.level-item.active {
  border-color: #FF8C00;
  background: #FFF8E1;
}

.level-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.level-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

.item-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

/* 选择器样式 */
.item-picker, .time-picker {
  margin-bottom: 20rpx;
}

.picker-content {
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 24rpx;
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.picker-content:active {
  background: #f0f0f0;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.picker-text:placeholder {
  color: #ccc;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
}

/* 楼层输入 */
.floor-inputs, .budget-inputs {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.floor-input, .budget-input {
  flex: 1;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background: #fafafa;
  text-align: center;
}

.floor-separator, .budget-separator {
  font-size: 28rpx;
  color: #666;
}

.floor-unit, .budget-unit {
  font-size: 28rpx;
  color: #666;
  width: 60rpx;
}

/* 付款方式 */
.payment-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.payment-option {
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
  text-align: center;
  transition: all 0.3s ease;
}

.payment-option.active {
  border-color: #FF8C00;
  background: #FFF8E1;
}

.payment-text {
  font-size: 26rpx;
  color: #333;
}

/* 购房目的网格 */
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.purpose-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 16rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
  transition: all 0.3s ease;
}

.purpose-item.active {
  border-color: #FF8C00;
  background: #FFF8E1;
}

.purpose-icon {
  font-size: 36rpx;
  margin-bottom: 12rpx;
}

.purpose-text {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* 其他目的输入 */
.other-input {
  width: 100%;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 28rpx;
  background: #fafafa;
}

/* 需求文本域 */
.demand-textarea {
  width: 580rpx;
  height: 160rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 28rpx;
  background: #fafafa;
  margin-bottom: 16rpx;
}

.textarea-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
}

/* 提交按钮 */
.action-buttons {
  padding: 40rpx 0;
}

.submit-btn {
  background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  padding: 28rpx;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 60rpx;
  width: 100%;
}

.submit-btn:disabled {
  opacity: 0.6;
}
</style>